<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言管理 - 北极星后台</title>
    <style>
        /* 基础样式 */
        :root {
            --primary-color: #3498db;
            --secondary-color: #2c3e50;
            --danger-color: #e74c3c;
            --success-color: #2ecc71;
            --warning-color: #f39c12;
            --light-color: #ecf0f1;
            --dark-color: #34495e;
            --sidebar-width: 250px;
            --transition-speed: 0.3s;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }

        /* 按钮样式 */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px 15px;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            font-size: 14px;
            transition: all var(--transition-speed);
            gap: 8px;
        }

        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }

        .btn-danger {
            background-color: var(--danger-color);
            color: white;
        }

        .btn-success {
            background-color: var(--success-color);
            color: white;
        }

        .btn-secondary {
            background-color: #95a5a6;
            color: white;
        }

        .btn-sm {
            padding: 5px 10px;
            font-size: 12px;
        }

        .btn:hover {
            opacity: 0.9;
            transform: translateY(-2px);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .btn:active {
            transform: translateY(0);
        }

        /* 卡片样式 */
        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
            overflow: hidden;
            transition: all var(--transition-speed);
        }

        .card:hover {
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        }

        .card-header {
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f8f9fa;
        }

        .card-body {
            padding: 20px;
        }

        /* 顶部导航 */
        .top-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: white;
            padding: 15px 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .user-info img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }

        .user-info span {
            font-weight: 500;
        }

        /* 留言标签页样式 */
        .message-tabs {
            border: 1px solid #eee;
            border-radius: 8px;
            overflow: hidden;
        }

        .nav-tabs {
            display: flex;
            border-bottom: 1px solid #eee;
            background-color: #f8f9fa;
            padding: 0 15px;
        }

        .nav-item {
            list-style: none;
        }

        .nav-link {
            display: block;
            padding: 12px 20px;
            color: #7f8c8d;
            text-decoration: none;
            border-bottom: 3px solid transparent;
            font-weight: 500;
            transition: all var(--transition-speed);
            position: relative;
        }

        .nav-link:hover {
            color: var(--secondary-color);
        }

        .nav-link.active {
            border-bottom-color: var(--primary-color);
            color: var(--primary-color);
        }

        .nav-link .badge {
            position: absolute;
            top: 5px;
            right: 5px;
            font-size: 10px;
            background-color: var(--danger-color);
            color: white;
            border-radius: 10px;
            padding: 2px 5px;
        }

        .tab-content {
            padding: 0;
        }

        .tab-pane {
            display: none;
        }

        .tab-pane.active {
            display: block;
        }

        /* 留言列表样式 */
        .message-list {
            display: flex;
            flex-direction: column;
        }

        .message-item {
            display: flex;
            align-items: center;
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            gap: 15px;
            transition: all var(--transition-speed);
        }

        .message-item:last-child {
            border-bottom: none;
        }

        .message-item:hover {
            background-color: rgba(52, 152, 219, 0.05);
        }

        .message-item.unread {
            background-color: rgba(52, 152, 219, 0.08);
        }

        .message-item.selected {
            background-color: rgba(52, 152, 219, 0.1);
        }

        .message-checkbox {
            min-width: 30px;
        }

        .message-checkbox input {
            cursor: pointer;
        }

        .message-sender {
            min-width: 200px;
        }

        .message-sender strong {
            display: block;
            margin-bottom: 3px;
            color: var(--secondary-color);
        }

        .message-sender small {
            color: #7f8c8d;
            font-size: 12px;
        }

        .message-content {
            flex: 1;
            overflow: hidden;
        }

        .message-content p {
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .message-time {
            min-width: 100px;
            text-align: right;
            color: #7f8c8d;
            font-size: 13px;
        }

        .message-actions {
            min-width: 80px;
            display: flex;
            gap: 5px;
        }

        /* 批量操作工具栏 */
        .message-toolbar {
            display: none;
            padding: 10px 20px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #eee;
            align-items: center;
            gap: 15px;
        }

        .message-toolbar.active {
            display: flex;
        }

        .message-toolbar-actions {
            display: flex;
            gap: 10px;
        }

        /* 回复模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1050;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: rgba(0, 0, 0, 0.5);
            opacity: 0;
            transition: opacity var(--transition-speed);
        }

        .modal.show {
            display: block;
            opacity: 1;
        }

        .modal-dialog {
            max-width: 600px;
            margin: 30px auto;
            transform: translateY(-50px);
            transition: transform var(--transition-speed);
        }

        .modal.show .modal-dialog {
            transform: translateY(0);
        }

        .modal-content {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
        }

        .modal-header {
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f8f9fa;
        }

        .modal-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--secondary-color);
        }

        .modal-body {
            padding: 20px;
            max-height: 70vh;
            overflow-y: auto;
        }

        .modal-footer {
            padding: 15px 20px;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            background-color: #f8f9fa;
        }

        .close {
            font-size: 24px;
            font-weight: bold;
            color: #7f8c8d;
            background: none;
            border: none;
            cursor: pointer;
            transition: color var(--transition-speed);
        }

        .close:hover {
            color: var(--danger-color);
        }

        /* 表单样式 */
        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            color: var(--secondary-color);
        }

        .form-control {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            transition: all var(--transition-speed);
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
            outline: none;
        }

        textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }

        /* 徽章样式 */
        .badge {
            display: inline-block;
            padding: 3px 7px;
            font-size: 12px;
            font-weight: 600;
            line-height: 1;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            border-radius: 10px;
        }

        /* 动画 */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideIn {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .message-item {
                flex-wrap: wrap;
                gap: 10px;
            }

            .message-sender {
                min-width: 100%;
                order: 2;
            }

            .message-content {
                min-width: 100%;
                order: 3;
            }

            .message-time {
                text-align: left;
                order: 1;
                margin-left: auto;
            }

            .message-actions {
                order: 4;
                margin-left: auto;
            }

            .modal-dialog {
                margin: 20px auto;
                width: 95%;
            }
        }
    </style>
    <!-- 引入Font Awesome图标 -->
    <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">-->
    <link rel="stylesheet" href="../../fontawesome-free-6.7.2-web/css/all.min.css">
</head>
<body>
<div class="main-content">
    <!--<div class="top-nav">
        <div>
            <button class="btn btn-primary" id="toggleSidebar">
                <i class="fas fa-bars"></i>
            </button>
        </div>
        <div class="user-info">
            <img src="https://via.placeholder.com/40" alt="用户头像">
            <span>北极星</span>
        </div>
    </div>-->

    <div class="card">
        <div class="card-header">
            <h3>留言管理</h3>
            <div class="message-search">
                <input type="text" class="form-control" placeholder="搜索留言..." style="max-width: 300px;">
            </div>
        </div>
        <div class="card-body">
            <div class="message-tabs">
                <!-- 批量操作工具栏 -->
                <div class="message-toolbar" id="messageToolbar">
                    <div class="selected-count">
                        <span id="selectedCount">0</span> 条留言已选中
                    </div>
                    <div class="message-toolbar-actions">
                        <button class="btn btn-sm btn-primary" id="markAsReadBtn"><i class="fas fa-envelope-open"></i> 标记为已读</button>
                        <button class="btn btn-sm btn-danger" id="deleteSelectedBtn"><i class="fas fa-trash"></i> 删除</button>
                    </div>
                </div>

                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" href="#" data-tab="unread">
                            未读留言
                            <span class="badge">5</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" data-tab="read">已读留言</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" data-tab="all">全部留言</a>
                    </li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane active" id="unread">
                        <div class="message-list">
                            <div class="message-item unread">
                                <div class="message-checkbox">
                                    <input type="checkbox" class="message-check">
                                </div>
                                <div class="message-sender">
                                    <strong>李四</strong>
                                    <small>lisi@example.com</small>
                                </div>
                                <div class="message-content">
                                    <p>关于网站开发咨询，请问您是否接企业官网开发项目？我们公司需要一个展示型网站，包含产品展示、新闻发布和联系方式等功能。</p>
                                </div>
                                <div class="message-time">
                                    2小时前
                                </div>
                                <div class="message-actions">
                                    <button class="btn btn-sm btn-primary reply-btn"><i class="fas fa-reply"></i></button>
                                    <button class="btn btn-sm btn-danger delete-btn"><i class="fas fa-trash"></i></button>
                                </div>
                            </div>
                            <div class="message-item unread">
                                <div class="message-checkbox">
                                    <input type="checkbox" class="message-check">
                                </div>
                                <div class="message-sender">
                                    <strong>王五</strong>
                                    <small>wangwu@example.com</small>
                                </div>
                                <div class="message-content">
                                    <p>移动应用开发需求，我们需要一个跨平台的APP，主要功能包括用户注册登录、内容浏览、在线支付和社交分享等。</p>
                                </div>
                                <div class="message-time">
                                    昨天 14:30
                                </div>
                                <div class="message-actions">
                                    <button class="btn btn-sm btn-primary reply-btn"><i class="fas fa-reply"></i></button>
                                    <button class="btn btn-sm btn-danger delete-btn"><i class="fas fa-trash"></i></button>
                                </div>
                            </div>
                            <div class="message-item">
                                <div class="message-checkbox">
                                    <input type="checkbox" class="message-check">
                                </div>
                                <div class="message-sender">
                                    <strong>张三</strong>
                                    <small>zhangsan@example.com</small>
                                </div>
                                <div class="message-content">
                                    <p>后端API开发咨询，我们需要为现有的移动应用开发一套RESTful API，使用Node.js或Python实现。</p>
                                </div>
                                <div class="message-time">
                                    2023-10-15
                                </div>
                                <div class="message-actions">
                                    <button class="btn btn-sm btn-primary reply-btn"><i class="fas fa-reply"></i></button>
                                    <button class="btn btn-sm btn-danger delete-btn"><i class="fas fa-trash"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane" id="read">
                        <div class="message-list">
                            <!-- 已读留言内容 -->
                            <div class="message-item">
                                <div class="message-checkbox">
                                    <input type="checkbox" class="message-check">
                                </div>
                                <div class="message-sender">
                                    <strong>赵六</strong>
                                    <small>zhaoliu@example.com</small>
                                </div>
                                <div class="message-content">
                                    <p>感谢您之前的回复，我们已经决定与您合作开发我们的电商平台。</p>
                                </div>
                                <div class="message-time">
                                    2023-10-10
                                </div>
                                <div class="message-actions">
                                    <button class="btn btn-sm btn-primary reply-btn"><i class="fas fa-reply"></i></button>
                                    <button class="btn btn-sm btn-danger delete-btn"><i class="fas fa-trash"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane" id="all">
                        <div class="message-list">
                            <!-- 全部留言内容 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 回复留言模态框 -->
<div class="modal" id="replyModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">回复留言</h5>
                <button type="button" class="close" id="closeReplyModal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="replyForm">
                    <div class="form-group">
                        <label>收件人</label>
                        <input type="text" class="form-control" id="recipient" readonly>
                    </div>
                    <div class="form-group">
                        <label>主题</label>
                        <input type="text" class="form-control" id="subject" required>
                    </div>
                    <div class="form-group">
                        <label>回复内容</label>
                        <textarea class="form-control" id="replyContent" rows="8" required></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="cancelReply">取消</button>
                <button type="button" class="btn btn-primary" id="sendReply">发送</button>
            </div>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal" id="confirmDeleteModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">确认删除</h5>
                <button type="button" class="close" id="closeDeleteModal">&times;</button>
            </div>
            <div class="modal-body">
                <p id="deleteMessage">您确定要删除这条留言吗？此操作无法撤销。</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="cancelDelete">取消</button>
                <button type="button" class="btn btn-danger" id="confirmDelete">确认删除</button>
            </div>
        </div>
    </div>
</div>

<script>
    // 标签页切换逻辑
    document.querySelectorAll('.nav-link').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();

            // 移除所有active类
            document.querySelectorAll('.nav-link').forEach(el => {
                el.classList.remove('active');
            });

            document.querySelectorAll('.tab-pane').forEach(pane => {
                pane.classList.remove('active');
            });

            // 添加active类到当前点击的标签
            this.classList.add('active');

            // 显示对应的内容
            const tabId = this.getAttribute('data-tab');
            document.getElementById(tabId).classList.add('active');
        });
    });

    // 模态框控制
    const replyModal = document.getElementById('replyModal');
    const confirmDeleteModal = document.getElementById('confirmDeleteModal');

    // 回复留言
    let currentMessage = null;

    document.querySelectorAll('.reply-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            currentMessage = this.closest('.message-item');
            const sender = currentMessage.querySelector('.message-sender strong').textContent;
            const email = currentMessage.querySelector('.message-sender small').textContent;

            // 填充表单数据
            document.getElementById('recipient').value = `${sender} ${email}`;
            document.getElementById('subject').value = `回复: ${currentMessage.querySelector('.message-content p').textContent.substring(0, 30)}...`;

            // 显示模态框
            replyModal.classList.add('show');
            document.body.style.overflow = 'hidden';
        });
    });

    // 关闭模态框的函数
    function closeModal(modal) {
        modal.classList.remove('show');
        document.body.style.overflow = '';
    }

    // 关闭回复模态框
    document.getElementById('closeReplyModal').addEventListener('click', () => closeModal(replyModal));
    document.getElementById('cancelReply').addEventListener('click', () => closeModal(replyModal));

    // 发送回复
    document.getElementById('sendReply').addEventListener('click', () => {
        // 这里添加发送逻辑
        alert('回复已发送！');
        closeModal(replyModal);
        document.getElementById('replyForm').reset();

        // 标记为已读
        if (currentMessage) {
            currentMessage.classList.remove('unread');
        }
    });

    // 删除留言相关操作
    let deleteAction = 'single'; // 'single' 或 'multiple'

    document.querySelectorAll('.delete-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            currentMessage = this.closest('.message-item');
            deleteAction = 'single';
            confirmDeleteModal.classList.add('show');
            document.body.style.overflow = 'hidden';
        });
    });

    // 批量删除
    document.getElementById('deleteSelectedBtn').addEventListener('click', function() {
        deleteAction = 'multiple';
        const selectedCount = document.querySelectorAll('.message-check:checked').length;
        if (selectedCount > 0) {
            document.getElementById('deleteMessage').textContent = `您确定要删除选中的 ${selectedCount} 条留言吗？此操作无法撤销。`;
            confirmDeleteModal.classList.add('show');
            document.body.style.overflow = 'hidden';
        } else {
            alert('请先选择要删除的留言！');
        }
    });

    // 关闭删除确认模态框
    document.getElementById('closeDeleteModal').addEventListener('click', () => closeModal(confirmDeleteModal));
    document.getElementById('cancelDelete').addEventListener('click', () => closeModal(confirmDeleteModal));

    // 确认删除
    document.getElementById('confirmDelete').addEventListener('click', () => {
        if (deleteAction === 'single' && currentMessage) {
            currentMessage.style.animation = 'fadeOut 0.3s forwards';
            setTimeout(() => {
                currentMessage.remove();
                alert('留言已删除！');
            }, 300);
        } else if (deleteAction === 'multiple') {
            document.querySelectorAll('.message-check:checked').forEach(checkbox => {
                const message = checkbox.closest('.message-item');
                message.style.animation = 'fadeOut 0.3s forwards';
                setTimeout(() => {
                    message.remove();
                }, 300);
            });
            alert('选中的留言已删除！');
            toggleToolbar();
        }
        closeModal(confirmDeleteModal);
    });

    // 标记为已读
    document.getElementById('markAsReadBtn').addEventListener('click', function() {
        const selectedMessages = document.querySelectorAll('.message-check:checked');
        if (selectedMessages.length > 0) {
            selectedMessages.forEach(checkbox => {
                const message = checkbox.closest('.message-item');
                message.classList.remove('unread');
            });
            alert('选中的留言已标记为已读！');
            toggleToolbar();
        } else {
            alert('请先选择要标记的留言！');
        }
    });

    // 批量选择功能
    function updateSelectedCount() {
        const selectedCount = document.querySelectorAll('.message-check:checked').length;
        document.getElementById('selectedCount').textContent = selectedCount;

        if (selectedCount > 0) {
            document.querySelectorAll('.message-check:checked').forEach(checkbox => {
                checkbox.closest('.message-item').classList.add('selected');
            });
            document.querySelectorAll('.message-check:not(:checked)').forEach(checkbox => {
                checkbox.closest('.message-item').classList.remove('selected');
            });
        } else {
            document.querySelectorAll('.message-item').forEach(item => {
                item.classList.remove('selected');
            });
        }
    }

    function toggleToolbar() {
        const selectedCount = document.querySelectorAll('.message-check:checked').length;
        const toolbar = document.getElementById('messageToolbar');

        if (selectedCount > 0) {
            toolbar.classList.add('active');
        } else {
            toolbar.classList.remove('active');
        }
    }

    document.querySelectorAll('.message-check').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            updateSelectedCount();
            toggleToolbar();
        });
    });

    // 点击模态框外部关闭
    window.addEventListener('click', (e) => {
        if (e.target === replyModal) {
            closeModal(replyModal);
        }
        if (e.target === confirmDeleteModal) {
            closeModal(confirmDeleteModal);
        }
    });

    // 按ESC键关闭模态框
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            if (replyModal.classList.contains('show')) {
                closeModal(replyModal);
            }
            if (confirmDeleteModal.classList.contains('show')) {
                closeModal(confirmDeleteModal);
            }
        }
    });
</script>
</body>
</html>